<template>
    <div style="width: 30px; margin: 0 auto">
        <el-popover placement="right" :width="400" trigger="click" :hide-after="0">
            <template #reference>
                <component is="PlusCircleOutlined" class="plusClass" ref="currentPlus"/>
            </template>
            <el-row :gutter="20">
                <el-col :span="8" class="colSpanClass" @click="addNode('YwuExecutorNode')"><span ><component is="UserOutlined"/> 执行人</span></el-col>
                <el-col :span="8" class="colSpanClass" @click="addNode('YwuApprovalNode')"><span ><component is="UserOutlined"/> 审批人</span></el-col>
                <el-col :span="8" class="colSpanClass" @click="addNode('YwuServiceNode')"><span ><component is="DatabaseOutlined"/> 服务节点</span></el-col>
            </el-row>

            <el-row :gutter="20">
                <el-col :span="8" class="colSpanClass" @click="addNode('YwuConditionalNode')"><span ><component is="ApartmentOutlined"/> 条件分支</span></el-col>
                <el-col :span="8" class="colSpanClass" @click="addNode('YwuParallelNode')"><span ><component is="BranchesOutlined"/> 并行分支</span></el-col>
            </el-row>
        </el-popover>
    </div>
    <div style="height: 30px"></div>

    <div style="width: 100px; margin: 0 auto" ref="currentDiv" @click="showDrawer()">
        <div class="endClass" ref="childRef" style="text-align: center; line-height: 30px; font-weight: bold">
            <span class="spanClass">结束</span>
        </div>
    </div>

    <svg width="0" height="0">
        <defs>
            <marker id="arrow" markerWidth="6" markerHeight="6" refX="0" refY="2" orient="auto">
                <path d="M0,0 L0,4 L6,2 z" fill="#000000" />
            </marker>
        </defs>
    </svg>

    <svg width="100000px" height="100000px" style="position: absolute;z-index: -1; top: 0; left: 0;">
        <line :x1="beforeNodeStartX"
              :y1="beforeNodeStartY"
              :x2="currentPlusTopX"
              :y2="currentPlusTopY"
              stroke="#000" stroke-width="2" />
    </svg>

    <svg width="100000px" height="100000px" style="position: absolute;z-index: -1; top: 0; left: 0;">
        <line :x1="currentPlusBottomX"
              :y1="currentPlusBottomY"
              :x2="currentTopX"
              :y2="currentTopY"
              stroke="#000" stroke-width="2" marker-end="url(#arrow)" />
    </svg>


    <el-drawer v-model="drawerFlag" :with-header="false" :close-on-click-modal="false" :lock-scroll="true">
        <YwuEndNodeDrawer :properties="jsonInfo.properties"/>
        <template #footer>
            <div style="flex: auto">
                <el-button @click="cancelUpdate()">取消</el-button>
                <el-button type="primary" @click="confirmUpdate()">确认</el-button>
            </div>
        </template>
    </el-drawer>
</template>

<script name="YwuEndNode" setup>
import {addNodeInfo} from "@/utils/flowCommon";
import emitter from '@/utils/mitt';
import YwuEndNodeDrawer from "@/views/bpmn/flow/drawer/YwuEndNodeDrawer.vue";
import {computed, onMounted, ref, nextTick, onBeforeUnmount} from "vue";

let props = defineProps(["jsonInfo", "beforeNodeStartX", "beforeNodeStartY", "beforeNode", "globalJson", "flowDetailJson"]);

let jsonInfo = computed(() => {return props["jsonInfo"]});
let beforeNodeStartX = computed(() => {return props["beforeNodeStartX"]});
let beforeNodeStartY = computed(() => {return props["beforeNodeStartY"]});
let beforeNode = computed(() => {return props["beforeNode"]});
let globalJson = computed(() => {return props["globalJson"]});
let flowDetailJson = computed(() => {return props["flowDetailJson"]});

let currentTopX = ref(0);
let currentTopY = ref(0);
let currentBottomX = ref(0);
let currentBottomY = ref(0);
let currentPlusTopX = ref(0);
let currentPlusTopY = ref(0);
let currentPlusBottomX = ref(0);
let currentPlusBottomY = ref(0);
let realBottomX = ref(0);
let realBottomY = ref(0);
let drawerFlag = ref(false);
let propertiesCopy = ref({});

let currentDiv = ref(null);
let currentPlus = ref(null);


function calcXy() {
    let nodeInfo = currentDiv.value;
    if (nodeInfo === null) {
        return;
    }
    currentTopX.value = nodeInfo.offsetLeft + nodeInfo.offsetWidth / 2;
    currentBottomX.value = nodeInfo.offsetLeft + nodeInfo.offsetWidth / 2;
    currentTopY.value = nodeInfo.offsetTop - 10;
    currentBottomY.value = nodeInfo.offsetTop + nodeInfo.offsetHeight;
    nodeInfo = currentPlus.value;
    currentPlusTopX.value = nodeInfo.offsetLeft + nodeInfo.offsetWidth / 2;
    currentPlusBottomX.value = nodeInfo.offsetLeft + nodeInfo.offsetWidth / 2;
    currentPlusTopY.value = nodeInfo.offsetTop;
    currentPlusBottomY.value = nodeInfo.offsetTop + nodeInfo.offsetHeight;
    realBottomX.value = currentBottomX.value;
    realBottomY.value = currentBottomY.value;
}

function addNode(nodeType) {
    addNodeInfo(nodeType, beforeNode.value, jsonInfo.value, globalJson.value);
    emitter.emit("refreshLine", "refreshLine");
}

function showDrawer() {
    // 备份数据
    propertiesCopy.value = {...jsonInfo.value.properties}
    drawerFlag.value = true
}

function confirmUpdate() {
    drawerFlag.value = false;
}

function cancelUpdate() {
    drawerFlag.value = false;
    // 还原数据
    jsonInfo.properties.value = {...propertiesCopy.value};
}

onMounted(() => {
    nextTick(() => {
        calcXy();
    });
    // 在组件挂载时添加窗口大小改变的监听器
    window.addEventListener('resize', calcXy);
    // 接收事件
    emitter.on('refreshLine', (message) => {
        nextTick(() => {
            calcXy();
        });
    });
})

onBeforeUnmount(() => {
    // 在组件销毁前移除监听器，避免内存泄漏
    window.removeEventListener('resize', calcXy);
})

defineExpose({
    jsonInfo, calcXy, realBottomX, realBottomY
})

</script>

<style scoped lang="less">
.endClass {
    width: 100px;
    height: 30px;
    border-radius: 10px;
    background-color: rgba(98, 245, 233, 0.43);
}
.endClass:hover {
    cursor: pointer;
}

.plusClass {
    font-size: 30px;
}

.plusClass:hover {
    cursor: pointer;
    color: rgba(4, 85, 248, 0.91);
}

.colSpanClass{
    height: 50px;
    font-size: 20px;
    line-height: 50px;
}

.colSpanClass:hover {
    background-color: #dfe4e7;
    cursor: pointer;
}
</style>